<template>
	<!-- 1. 页面主容器 -->
	<view class="index-page-container" @touchstart="handleCloseOverlay" :class="{ 'no-scroll': SelectAddressPopup }">

		<!-- 2. 【关键变动】统一的吸顶容器 -->
		<view class="unified-sticky-container" :class="{ 'is-active': isHeaderSticky }">
			<!-- 吸顶后显示的搜索栏 -->
			<view class="header-container-sticky header-container" :style="topBarStyle">
				<view class="location-selector" @click="navigateToCitySelect">
					<text>{{cityName}}</text>
					<u-icon name="arrow-down" bold color="#333" size="15"></u-icon>
				</view>
				<view class="search-bar" @click="navigateToSearch">
					<uni-icons type="mic" color="rgb(0,0,0,0.7)" size="25"></uni-icons>
					<text class="search-placeholder">话题·景点</text>
				</view>
				<view class="notification-icon" @click="navigateToNotifications">
					<text class="indexIconFont icon-xxtz notification-image-sticky"></text>
					<u-badge max="99" :value="totalUnreadCount > 0 ? totalUnreadCount : ''" type="error" absolute
						:offset="[-4, -4]"></u-badge>
				</view>
			</view>
		</view>


		<!-- 4. 页面主要内容 (可滚动) -->
		<view class="scrollable-content">
			<!-- 顶部视频和初始搜索区域 -->
			<view class="top-content-wrapper">
				<view class="video-play-button" @click.stop="togglePlay">
					<u-icon v-if="!isVideoPlaying" name="play-right-fill" color="rgba(255, 255, 255, 0.6)"
						size="38"></u-icon>
					<!-- <u-icon v-else name="pause" color="rgba(255, 255, 255, 0.8)" size="25"></u-icon> -->
				</view>
				<view class="video-section" @click="togglePlay">
					<DomVideoPlayer id="bgVideo" ref="bgVideo" class="video-background" :src="videoSrc" loop
						object-fit="cover" :muted="true" :isLoading="true" :autoplay="true" :controls="false" />
					<view class="video-controls-overlay">

						<view class="video-fullscreen-button" @click.stop="enterFullscreen">
							<text class="indexIconFont icon-shouye-quanping"></text>
						</view>
					</view>
					<view class="video-overlay"></view>
				</view>

				<!-- 初始状态的搜索栏 -->
				<view class="header-container initial-header" :style="topBarStyle">
					<view class="location-selector" @click="navigateToCitySelect">
						<text>{{cityName}}</text>
						<u-icon name="arrow-down" bold color="#fff" size="15"></u-icon>
					</view>
					<view class="search-bar" @click="navigateToSearch">
						<uni-icons type="mic" color="rgba(255,255,255,0.8)" size="25"></uni-icons>
						<text class="search-placeholder">话题·景点</text>
					</view>
					<view class="notification-icon" @click="navigateToNotifications">
						<text class="indexIconFont icon-xxtz notification-image"></text>
						<u-badge max="99" :value="totalUnreadCount > 0 ? totalUnreadCount : ''" type="error" absolute
							:offset="[-4, -4]"></u-badge>
					</view>
				</view>
			</view>


			<view class="local-hot-section" id="featured-recommendations-header" v-show="localExpertList.length >0">
				<text class="section-title">
					<view class="section-title-line">
						<view class="section-title-left">
							本地达人
						</view>
						<view class="section-title-right">
							家乡犄角旮旯的宝藏，我门儿清
						</view>
					</view>
				</text>
				<!-- <text class="indexIconFont icon-shouye-bendijingxuan section-title-underline-icon"></text> -->
				<view class="local-hot-section-image">
					<image src="@/static/index_line.png" mode="widthFix"></image>
				</view>
			</view>

			<u-scroll-list :indicator="false" class="LocalExpert">
				<view v-for="(localExpert_item, index) in localExpertList" :key="index"
					@click="handleToLocalDetail(localExpert_item)">
					<view class="LocalExpert-image">
						<image :src="localExpert_item.avatar" mode="aspectFill"></image>
						<image class="location" src="/static/index/logo-v.png" mode=""></image>
					</view>
					<view class="LocalExpert-name">
						<view class="name">
							{{localExpert_item.userName}}
						</view>
					</view>
				</view>
			</u-scroll-list>


			<!-- 任务中心和本地文旅 -->
			<view class="banner-links-container" v-if="false">
				<navigator hover-class="none" url="/pages_sub/index/checkin/checkin" class="banner-link-item rwzx">
					<image class="banner-image" src="/static/index/local/rwzx.png"></image>
					<view class="banner-text-content">
						<text class="banner-title">任务中心</text>
						<text class="banner-subtitle">参与赢礼</text>
					</view>
					<image class="banner-icon" src="/static/index/local/icon_task_center.png" mode="heightFix"></image>
				</navigator>
				<navigator hover-class="none" url="/pages_sub/index/hot-activity/hot-activity"
					class="banner-link-item bdwl">
					<image class="banner-image" src="/static/index/local/bdwl.png"></image>
					<view class="banner-text-content">
						<text class="banner-title">本地文旅</text>
						<text class="banner-subtitle">官方推荐</text>
					</view>
					<image class="banner-icon" src="/static/index/local/icon_local_culture.png" mode="heightFix">
					</image>
				</navigator>
			</view>

			<!-- 夏日出行计划 Swiper -->
			<view class="summer-plan-swiper">
				<u-swiper :list="summerPlanImages" height="120" imgMode="scaleToFill" radius="10" :autoplay="true"
					circular :indicator="true" indicatorMode="dot" @click="navigateToBanner(item)"
					indicatorActiveColor="#ffaa0c"></u-swiper>
			</view>

			<view class="footer-card">
				<!-- 本地精选标题 -->
				<u-sticky offset-top="76">
					<view class="quick-links-container">
						<view v-for="(item, index) in quickLinks" :key="index" class="quick-link-item">
							<navigator hover-class="none" :url="item.url" class="quick-link-navigator">
								<view v-if="item.type === 'title'" class="quick-link-title-item">
									<text class="title-main">{{ item.title }}</text>
									<text class="indexIconFont icon-shouye-bendijingxuan title-underline-icon"></text>
								</view>
								<view class="" v-else>
									<view class="link-icon-wrapper">
										<image class="link-icon" :src="item.icon" mode="aspectFit"></image>
									</view>
									<text class="link-title">{{ item.title }}</text>
								</view>
							</navigator>
						</view>
					</view>
				</u-sticky>

				<!-- 瀑布流 -->
				<view class="waterfall-section">
					<WaterfallPosts :left-list="leftList" :right-list="rightList"
						:active-long-press-post-id="activeLongPressPostId" @itemClick="navigateToPostDetail"
						@closeOverlay="handleCloseOverlay" @longPress="handleLongPress" @touchEnd="handleTouchEnd"
						@like="handleLikePost" />
					<u-loadmore :status="waterfallLoadStatus" />
				</view>
			</view>
		</view>


		<u-popup :show="SelectAddressPopup" :round="10" mode="center" @close="SelectAddressPopup = false"
			:closeOnClickOverlay="false">
			<view class="SelectAddressPopupStyle">
				<view class="header-title">
					您当前位置在{{'“'+ displayCurrentCity + '”'}}，是否切换到该城市？
				</view>
				<view class="footer-btn">
					<view class="footer-btn-item cancel" @click="SelectAddressPopup = false">
						取消
					</view>
					<view class="footer-btn-item confirm" @click="switchAddress()">
						切换
					</view>
				</view>
			</view>
		</u-popup>
		<VideoFullscreenModal :visible="showVideoModal" :video-src="currentModalVideoSrc"
			@close="showVideoModal = false" />
		<Tabbar :tabbar-index="0" :scrolled="isScrolled" @goToTop="handleGoToTop" />
		<PublishPopup :show="showPublishPopup" @close="showPublishPopup = false" />
		<richPostDetail :show="showRichPostDetail" @close="showRichPostDetail = false" :postData="currentDetail" />
	</view>
</template>

<script>
	import PublishPopup from '@/components/PublishPopup/PublishPopup.vue';
	import richPostDetail from '@/components/richPostDetail/richPostDetail.vue';
	import Tabbar from "@/components/tabbar/tabbar.vue"
	import WaterfallPosts from '@/components/index/waterfall-posts/waterfall-posts.vue';
	import {
		mapState
	} from 'vuex';
	import {
		getPosts,
		postCancelLike,
		postClientLike,
		getExpertList
	} from '@/request/api.js';
	import config from '@/config/index.js';
	import VideoFullscreenModal from '@/components/VideoFullscreenModal/VideoFullscreenModal.vue';
	import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue';
	export default {
		components: {
			Tabbar,
			PublishPopup,
			WaterfallPosts,
			VideoFullscreenModal,
			DomVideoPlayer,
			richPostDetail
		},
		// #ifdef APP-PLUS
		onBackPress(event) {
			if (plus.os.name === "Android") {
				// 获取弹窗状态 isPopup 1:打开
				const isPopup = uni.getStorageSync("isPopup");
				if (isPopup === "1") {
					// 关闭弹窗
					this.$refs.customPopup.close();
					// 阻止页面返回
					return true;
				}
			}
		},
		// #endif

		data() {
			return {
				SelectAddressPopup: false,
				showVideoModal: false,
				currentModalVideoSrc: config.cdnURL + '/home_page/header.mp4',
				isVideoPlaying: true,
				showRichPostDetail: false,
				showPublishPopup: false,
				videoSrc: config.cdnURL + '/home_page/header.mp4',
				localExpertList: [],
				quickLinks: [{
						title: '本地\n精选',
						type: 'title'
					}, // 特殊项
					// --- 关键变动: style -> className ---
					{
						title: '巷子美食',
						icon: '/static/index/local/icon_food.png',
						url: '/pages_sub/index/featured/alley-food',
						className: 'gradient-food'
					},
					{
						title: '土著玩乐',
						icon: '/static/index/local/icon_play.png',
						url: '/pages_sub/index/featured/native-gameplay',
						className: 'gradient-play'
					},
					{
						title: '风土人情',
						icon: '/static/index/local/icon_culture.png',
						url: '/pages_sub/index/featured/local-culture',
						className: 'gradient-culture'
					},
					{
						title: '本地圈子',
						icon: '/static/index/local/icon_circles.png',
						url: '/pages_sub/index/featured/local-circles',
						className: 'gradient-circles'
					},
					// {
					// 	title: '本地向导',
					// 	icon: '/static/index/local/icon_guide.png',
					// 	url: '/pages_sub/index/featured/local-guide',
					// 	className: 'gradient-guide'
					// }
				],
				summerPlanImages: [
					'/static/index/local/banner3.png',
					// '/static/index/local/banner2.jpg',
					'/static/index/local/banner.png',
					'http://www.hacn86.cn/home_page/2025/07/29/1753749969966_20250729084609A005.png',
				],

				isHeaderSticky: false,
				isQuickLinksSticky: false,
				stickyTriggerTop: 0,
				quickLinksStickyTriggerTop: 0,
				stickyHeaderHeight: 0,

				activeLongPressPostId: null,

				leftList: [],
				rightList: [],
				waterfallPage: 1,
				waterfallPageSize: 8,
				isWaterfallLoading: false,
				waterfallLoadStatus: 'loadmore',
				currentDetail: {},
				isScrolled: false, // 跟踪页面修改tabbar中的显示内容
				currentCity: '定位失败',
			};
		},
		computed: {
			...mapState('im', ['totalUnreadCount']),
			cityName() {
				return this.$store.state.cityInfo.name
			},

			topBarStyle() {
				// #ifdef MP-WEIXIN
				if (this.$store.state.systemInfo.capsuleInfo.width > 0) {
					const paddingRight = this.$store.state.systemInfo.capsuleInfo.width + this.$store.state.systemInfo
						.capsuleRightPadding * 2;
					const paddingTop = this.$store.state.systemInfo.statusBarHeight + this.$store.state.systemInfo
						.capsuleRightPadding;


					return `padding:${paddingTop}px ${paddingRight}px 10rpx 30rpx;`;
				}
				// #endif
				// #ifdef APP-PLUS || H5
				return `padding-top: ${uni.getSystemInfoSync().statusBarHeight}px;`;
				// #endif
				return '';
			},
			displayCurrentCity() {
				// 仅用于展示，去掉"市"字
				if (this.currentCity && this.currentCity.endsWith('市')) {
					return this.currentCity.slice(0, -1);
				}
				return this.currentCity;
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.getLayoutPositions();
			});
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			const shouldBeSticky = scrollTop > 10;
			if (this.isHeaderSticky !== shouldBeSticky) {
				this.isHeaderSticky = shouldBeSticky;
			}
			if (scrollTop > 10) {
				// this.pauseVideo()
			}
			if (this.quickLinksStickyTriggerTop > 0) {
				const shouldLinksBeSticky = scrollTop >= this.quickLinksStickyTriggerTop;
				if (this.isQuickLinksSticky !== shouldLinksBeSticky) {
					this.isQuickLinksSticky = shouldLinksBeSticky;
				}
			}
			// 控制回到顶部的内容显示
			const scrolledThreshold = 460;
			const currentScrolledState = scrollTop > scrolledThreshold;
			if (this.isScrolled !== currentScrolledState) {
				this.isScrolled = currentScrolledState;
			}

		},
		onLoad() {
			this.loadPosts(true);
			this.initExpertList()
			uni.$on('togglePublishPopup', this.handleTogglePublishPopup);

			// 获取当前坐标，存入缓存，随时读取使用
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					uni.setStorageSync('longitude', res.longitude)
					uni.setStorageSync('latitude', res.latitude)
				}
			});

			// 进入app默认初始化一下当前位置
			this.refresh()

		},
		onReachBottom() {
			this.loadPosts(false);
		},
		onUnload() {
			uni.$off('togglePublishPopup', this.handleTogglePublishPopup);
			this.pauseVideo()
		},
		onHide() {
			this.pauseVideo()
			// 当页面被隐藏时（例如切换Tab），强制关闭弹窗
			this.showPublishPopup = false;
		},
		onPullDownRefresh() {
			//如果打开的是详情弹框，下拉刷新不掉接口
			if (this.showRichPostDetail) {

			} else {
				this.loadPosts(true);
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);

		},
		onBackPress(options) {
			// 优先关闭发布弹窗
			if (options.from === 'backbutton' && this.showPublishPopup) {
				this.showPublishPopup = false;
				return true;
			}
			// 优先关闭视频弹框
			if (options.from === 'backbutton' && this.showVideoModal) {
				// 需要触发组件的关闭
				this.showVideoModal = false
				return true;
			}

			// 优先关闭详情弹框
			if (options.from === 'backbutton' && this.showRichPostDetail) {
				// 需要触发组件的关闭
				this.showRichPostDetail = false
				return true;
			}

			return false;
		},
		methods: {
			initExpertList() {
				let params = {
					expertStarts: 1
				}
				getExpertList(params).then(res => {
					console.log(res, '达人列表');
					if (res.data.code == 200) {
						this.localExpertList = res.data.rows
					}
				})
			},
			handleLikePost(item) {
				const isLiked = item.isLiked;
				const api = isLiked ? postCancelLike : postClientLike;

				// UI即时反馈
				item.isLiked = !isLiked;
				item.likeCount += isLiked ? -1 : 1;

				api({
					postId: item.id,
					userId: this.$store.state.userInfo.userId
				}).catch(() => {
					// 失败时回滚
					item.isLiked = isLiked;
					item.likeCount += isLiked ? 1 : -1;
				});
			},
			// 用户选择切换城市
			switchAddress() {
				let cityInfo = {
					code: '',
					name: this.currentCity
				}
				this.$store.commit('setCityInfo', cityInfo);
				this.SelectAddressPopup = false
			},
			async refresh() {
				// 判断vuex中是否有值，如果有历史位置，需要判断历史位置与当前位置是否相同，如果不想同需要用户手动选择是否切换
				// 直接尝试获取位置
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (data) => {
						uni.hideLoading();
						if (data.address) {
							this.currentCity = data.address.city || '';
							if (!this.currentCity && data.address.district) {
								this.currentCity = data.address.district;
							}
							// 如果当前定位的地址与仓库中的地址不一样，打开弹框，让用户选择是否切换地址
							if (this.currentCity != this.cityName) {
								this.SelectAddressPopup = true
							}
						} else {
							this.currentCity = '未知';
						}
					},
					fail: (err) => {
						// 根据错误信息判断是否是权限问题
						const errMsg = err.errMsg || err.message || '';
						const errCode = err.errCode || err.code || 0;

						// 判断是否为权限相关错误
						const isPermissionError =
							errCode === 1 || // 缺少定位权限
							errMsg.includes('缺少定位权限') ||
							errMsg.includes('定位服务没有开启') ||
							errMsg.includes('geolocation:12') ||
							errMsg.includes('authorization') ||
							errMsg.includes('permission');

						if (isPermissionError) {
							// 权限相关错误
							uni.showModal({
								title: '授权提示',
								content: '需要获取您的位置信息，请在设置中开启定位权限',
								showCancel: true,
							});
						} else {
							uni.showToast({
								title: '定位失败',
								icon: 'none'
							});
						}

						this.currentProvince = '';
						this.currentCity = '定位失败';
					}
				});


			},
			// 回到顶部
			handleGoToTop() {
				// 实现回到顶部的逻辑
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 10
				});
			},
			// 点击去本地达人详情
			handleToLocalDetail(item) {
				uni.navigateTo({
					url: `/pages_sub/index/LocalExpertsDetail/LocalExpertsDetail?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			getLayoutPositions() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.unified-sticky-container').boundingClientRect(data => {
					if (data) this.stickyHeaderHeight = data.height;
				}).exec();
				query.select('#initial-quick-links').boundingClientRect(data => {
					if (data) {
						// 快捷入口的吸顶触发点 = 元素初始top值 - 吸顶搜索栏高度
						this.quickLinksStickyTriggerTop = data.top - this.stickyHeaderHeight;
					}
				}).exec();
			},
			async loadPosts(isRefresh = false) {
				if (this.isWaterfallLoading || (!isRefresh && this.waterfallLoadStatus === 'nomore')) return;
				this.isWaterfallLoading = true;
				this.waterfallLoadStatus = 'loading';
				if (isRefresh) {
					this.waterfallPage = 1;
					this.leftList = [];
					this.rightList = [];
				}
				let isNewAddPost = uni.getStorageSync('isNewAddPost')
				const params = {
					userId: this.$store.state.userInfo.userId,
					queryType: 1,
					categoryId: 0,
					pageNum: this.waterfallPage,
					pageSize: this.waterfallPageSize,
					isNewDesc: isNewAddPost ? 2 : 1
				};
				console.log('即将发送 getPosts 请求，参数为:', params);
				try {
					const res = await getPosts(params);
					if (res.data && res.data.code === 200) {
						const formattedPosts = (res.data.rows || []).map(this.formatApiData);
						this.distributePostsToColumns(formattedPosts);
						const hasMore = formattedPosts.length === this.waterfallPageSize;
						this.waterfallLoadStatus = hasMore ? 'loadmore' : 'nomore';
						if (hasMore) this.waterfallPage++;
					} else {
						this.waterfallLoadStatus = 'loadmore';
					}
				} catch (error) {
					this.waterfallLoadStatus = 'loadmore';
				} finally {
					this.isWaterfallLoading = false;
					uni.setStorageSync('isNewAddPost', false)
				}
			},
			distributePostsToColumns(newPosts) {
				newPosts.forEach(post => {
					if (this.leftList.length <= this.rightList.length) this.leftList.push(post);
					else this.rightList.push(post);
				});
			},
			formatApiData(item) {
				const coverImage = (item.files && item.files.length > 0 && item.files[0].fileUrl) ? (item.files[0].fileUrl
					.startsWith('http') ? item.files[0].fileUrl : config.cdnURL + item.files[0].fileUrl) : '';
				const authorAvatar = item.avatar ? (item.avatar.startsWith('http') ? item.avatar : config.cdnURL + item
					.avatar) : '/static/demo/avatar_default.png';
				return {
					id: item.id,
					image: coverImage,
					content: item.content,
					author: {
						avatar: authorAvatar,
						name: item.nickName || '匿名用户',
						tag: Math.random() > 0.6 ? '高级土著' : ''
					},
					isLiked: item.isLiked,
					likeCount: item.likeCount,
					longPressTip: item.whisper || '尚未添加悄悄话',
					...item
				};
			},
			pauseVideo() {
				const player = this.$refs.bgVideo;
				player.pause();
				this.isVideoPlaying = false;
				// console.log("暂停");
			},
			playVideo() {
				const player = this.$refs.bgVideo;
				player.play();
				this.isVideoPlaying = true;
				// console.log("播放");
			},
			togglePlay() {
				const player = this.$refs.bgVideo;
				if (this.isVideoPlaying) {
					player.pause();
				} else {
					player.play();
				}
				this.isVideoPlaying = !this.isVideoPlaying
			},
			enterFullscreen() {
				this.pauseVideo()
				this.showVideoModal = true;
			},
			handleLongPress(postId) {
				this.activeLongPressPostId = postId;
			},
			handleCloseOverlay() {
				if (this.activeLongPressPostId !== null) {
					setTimeout(() => {
						this.activeLongPressPostId = null;
					}, 100);
				}
			},
			handleTouchEnd() {},
			navigateToCitySelect() {
				uni.navigateTo({
					url: '/pages_sub/common/city/city-select'
				});
			},
			navigateToSearch() {
				uni.navigateTo({
					url: '/pages_sub/common/search-suggestions/search-suggestions'
				});
			},
			navigateToNotifications() {
				uni.navigateTo({
					url: '/pages_sub/index/friends/make-friends'
				})
			},
			navigateToBanner(item) {
				uni.navigateTo({
					url: `/pages_sub/common/general-activity/general-activity`,
					success: (res) => res.eventChannel.emit('acceptDataFromOpenerPage', {
						item: item
					})
				});
			},
			handleTogglePublishPopup() {
				// 这里需要判断当前页面是否是活动页面，避免后台页面也响应事件
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				// 确保只有当前显示的页面才打开弹窗
				if (currentPage.route === 'pages/index/index') {
					this.showPublishPopup = !this.showPublishPopup;
				}
			},
			navigateToPostDetail(item) {
				// uni.navigateTo({
				// 	url: `/pages_sub/index/rich-post-detail/rich-post-detail`,
				// 	success: (res) => res.eventChannel.emit('acceptDataFromOpenerPage', {
				// 		item: item
				// 	})
				// });
				this.currentDetail = item
				this.showRichPostDetail = true

			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-page-container {
		background-color: #ffffff;

		&.no-scroll {
			position: fixed;
			width: 100%;
			overflow: hidden;
		}
	}

	.unified-sticky-container {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background-color: #ffffff;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

		// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		&.is-active {
			visibility: visible;
			opacity: 1;
			padding-top: 20rpx;
		}
	}

	.header-container {
		display: flex;
		align-items: center;
		/* #ifdef APP || H5  */
		padding: 10rpx 30rpx;
		/* #endif */
		box-sizing: border-box;

		&.header-container-sticky .search-bar {
			background-color: #f4f4f4;
		}

		.location-selector {
			display: flex;
			/* 让文字和图标在一行 */
			align-items: flex-end;
			/* 垂直居中 */
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 20rpx;
			color: #333;
		}
	}

	.scrollable-content {
		background-color: #f3f2f2;
	}

	.top-content-wrapper {
		position: relative;
		width: 100%;

		.video-play-button {
			position: absolute;
			top: calc(50% - 30rpx);
			left: calc(50% - 60rpx);
			z-index: 999;

			.icon-shouye-quanping {
				color: #FFFFFF;
			}

			// background-color: rgba(0, 0, 0, 0.4); 
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
		}

		.video-section {
			// height: 480rpx;
			height: 400rpx;

			.video-background {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.video-controls-overlay {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				display: flex;
				align-items: center;
				z-index: 5;
			}

			.video-fullscreen-button {
				.icon-shouye-quanping {
					color: #FFFFFF;
				}

				background-color: rgba(0, 0, 0, 0.4);
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;
			}

			.video-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
			}
		}

		.header-container.initial-header {
			position: fixed;
			top: 20rpx;
			left: 0;
			right: 0;
			z-index: 10;

			.location-selector {
				color: #fff;
			}

			.search-bar {
				background-color: rgba(255, 255, 255, 0.2);
				border: 1rpx solid rgba(255, 255, 255, 0.2);
			}

			.search-placeholder {
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}

	.search-bar {
		flex-grow: 1;
		display: flex;
		align-items: center;
		height: 64rpx;
		border-radius: 32rpx;
		padding: 0 20rpx;

		.search-placeholder {
			margin-left: 10rpx;
			font-size: 28rpx;
		}
	}

	.notification-icon {
		margin-left: 20rpx;
		position: relative;
		width: 50rpx;
		height: 50rpx;

		.notification-image {
			font-size: 55rpx;
			color: #FFFFFF;
		}

		.notification-image-sticky {
			color: #333;
			font-size: 55rpx;
		}
	}

	.footer-card {
		background-color: #fff;
		margin: 40rpx 0;
		border-radius: 40rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		min-height: 800rpx;

		.quick-links-container {
			background-color: #fff;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			display: flex;
			justify-content: space-around;
			align-items: flex-start;
			padding: 10rpx 30rpx 0;
			margin-bottom: -10rpx;

			.quick-link-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.quick-link-navigator {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-decoration: none;
				position: relative;
				height: 124rpx;
			}

			.link-icon-wrapper {
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 2;
				margin: 0 auto;
				width: 80rpx !important;
				height: 80rpx !important;
				border-radius: 50%;

			}

			.link-icon {
				width: 100%;
				height: 100%;

			}

			.link-title {
				font-size: 26rpx;
				color: #333;
				position: relative;
				top: -10rpx;
				z-index: 2;
				font-weight: 500;
			}

			/* “本地精选”特殊样式 */
			.quick-link-title-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				height: 124rpx;

				.title-main {
					line-height: 40rpx;
					font-size: 36rpx;
					font-weight: 900;
					color: #000;
					position: relative;
					z-index: 2;
					margin-top: 30rpx;
				}

				.title-underline-icon {
					color: #FFD200;
					font-size: 34rpx;
					bottom: 10rpx;
					position: absolute;
					z-index: 1;
				}
			}

		}

		.waterfall-section {
			padding: 0 10rpx;
			padding-bottom: 130rpx;
		}
	}

	.banner-links-container {
		display: flex;
		padding: 0rpx 30rpx 20rpx;
		gap: 20rpx;
		background-color: #fff;
	}

	.banner-link-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		border-radius: 24rpx;
		position: relative;

		.banner-image {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.banner-text-content {
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 2;

			.banner-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}

			.banner-subtitle {
				font-size: 24rpx;
				color: #333;
				margin-top: 8rpx;
			}
		}

		.banner-icon {
			width: 80rpx;
			height: 80rpx;
			position: relative;
			z-index: 2;
		}
	}

	.summer-plan-swiper {
		padding: 0 30rpx 0;
	}

	.local-hot-section {
		margin: 20rpx 30rpx 0;
		position: relative;
		display: flex;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 40rpx;

		.section-title {
			display: block;
			position: absolute;
			z-index: 2;

			.section-title-line {
				display: flex;
				align-items: flex-end; // 底部对齐

				.section-title-left {
					font-size: 34rpx;
					font-weight: 900;
				}

				.section-title-right {
					margin-left: 20rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(77, 77, 86, 1);
					line-height: 30rpx;
				}
			}

		}

		.local-hot-section-image {
			image {
				height: 40rpx !important;
				width: 140rpx;
				color: #FFD200;
				font-size: 34rpx;
				bottom: -20rpx;
				position: absolute;
				z-index: 1;
			}
		}

	}

	// 本地达人
	.LocalExpert {
		margin: 30rpx 30rpx 0;

		.LocalExpert-image {
			box-sizing: border-box;
			width: 160rpx; // 总宽度包含边框
			height: 160rpx; // 总高度包含边框
			margin-right: 10rpx;
			border-radius: 24rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 8rpx solid rgba(229, 227, 227, 1);
			display: flex; // 使用flex布局实现居中
			justify-content: center; // 水平居中
			align-items: center; // 垂直居中
			flex-shrink: 0; // 防止在flex容器中被压缩
			position: relative; // 为绝对定位的子元素提供参考点

			image {
				width: 140rpx; // 内部图片宽度
				height: 140rpx; // 内部图片高度
				border-radius: 16rpx;
				object-fit: cover; // 确保图片填充整个区域而不变形
			}

			.location {
				width: 30rpx;
				height: 30rpx;
				position: absolute; // 绝对定位
				right: -8rpx; // 右边距离，考虑到8rpx的边框
				bottom: -8rpx; // 底部距离，考虑到8rpx的边框
				z-index: 2; // 确保在最上层
			}
		}

		.LocalExpert-name {
			width: 110rpx;
			margin: 0 20rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 1);

			.name {
				max-width: 110rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}



	// 是否切换城市弹窗
	.SelectAddressPopupStyle {
		z-index: 99999;
		width: 90vw;
		background: linear-gradient(135deg, rgba(240, 240, 240, 0.7), rgba(220, 220, 220, 0.5));
		border-radius: 20rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(8rpx);
		-webkit-backdrop-filter: blur(8rpx);

		// 阻止弹窗内容区域的滑动穿透
		.header-title,
		.footer-btn,
		.footer-btn-item {
			touch-action: none;
		}

		.header-title {
			font-size: 32rpx;
			padding: 30rpx;
		}

		.footer-btn {
			display: flex;
			justify-content: flex-end;
			align-items: right;
			padding: 30rpx;

			.footer-btn-item {
				width: 140rpx;
				text-align: center;
				padding: 10rpx 0;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 40rpx;
			}

			.confirm {
				background: #FFB327;
				color: #fff;
			}

			.cancel {
				background-color: rgba(255, 255, 255, 0.5);
				color: #666;
				border: 1rpx solid rgba(0, 0, 0, 0.1);
			}
		}
	}
</style>